<html class="ks-webkit537 ks-webkit ks-chrome42 ks-chrome">
<style>
.li_style {list-style-type:none;}
</style>
	<head>
        <meta charset="gbk">
        <meta name="keywords" content="{$site_seo_keywords}">
        <meta name="description" content="{$site_seo_description}" />
        <title>{$lession['sc_name']}</title>
		<link href="__PUBLIC__/js/artDialog_v6/ui_dialog.css" rel="stylesheet" />
		<link rel="stylesheet" media="screen" href="__PUBLIC__/simplebootx/public/css/play.css" />
		<script src="__PUBLIC__/js/jquery.js"></script>
		<script src="__PUBLIC__/js/artDialog_v6/dialogmin.js"></script>
	</head>
	<body>
		<div class="tx-main" style="overflow:hidden;">
			<div class="tx-banner">
				<div class="tx-banner-left">
					<a href="{:u('course/Course/courseinfo',array('id'=>$lession['cs_id']))}" id="J_goBack">
						<img src="__PUBLIC__/simplebootx/public/images/play_1.png" alt="">
					</a>
				</div>
			   <div class="tx-banner-title" id="J_CourseTitle">{$lession['csname']}</div>
			   <!-- <div class="tx-banner-logo"><a href="#"><img src="__PUBLIC__/simplebootx/public/images/logo.png" alt=""></a></div> -->
			</div>
			<div class="tx-main-inner" id="J_Content">
				<div class="tx-player-wrapper ks-player" style="display: block;  transition: 1s;">
					<div class="hd"></div>
					<div class="bd">
						<div class="container" id="J_Container"  style="transition: 1s;-webkit-transition: 1s;">
						    <input type="hidden" id="cs_id" value="{$lession['cs_id']}"></input>
							<input type="hidden" id="sc_id" value="{$lession['id']}"></input>
							<if condition="$isstrat"> 
								<if condition="$isover eq 1">	
								    <if condition="$isbuy==1 or $lession['is_free']==1">
										<div class="player" id="J_Player" style="transition: 1s;-webkit-transition:1s;width:100%; height:auto;">
											<script src="//qzonestyle.gtimg.cn/open/qcloud/video/live/h5/live_connect.js" charset="utf-8"></script>;
											<script> 
											    var height=$(window).height()-160;
												var width = $(window).width()+17-320;
												var player = new qcVideo.Player("J_Player", {
													"channel_id": '{$channel_id}',
													"app_id": '{$appid}',
													"width" : width,
													"height" : height
													});
											</script>
										</div>
										<button class="button button-over">我学完了</button>
									<else />
									    <div class="poster" id="J_Poster" style="transition: 1s;-webkit-transition: 1s;">
											<div class="poster-wrapper-outer">
												<div class="poster-wrapper-inner">
													<div class="icon"></div>
													<div class="detail-wrapper">
														<p>您还没购买此课程，请购买后再观看学习。</p>
													</div>
												</div>
											</div>
										</div> 
									</if>
								<else />
								    <div class="poster" id="J_Poster" style="transition: 1s;-webkit-transition: 1s;">
										<div class="poster-wrapper-outer">
											<div class="poster-wrapper-inner">
												<div class="icon"></div>
												<div class="detail-wrapper">
													<p>直播已经结束，请关注下节课内容或观看录播！</p>
												</div>
											</div>
										</div>
									</div>
                                    <button class="button button-over">我学完了</button>											
								</if>
							<else />
								<div class="poster" id="J_Poster" style="transition: 1s;-webkit-transition: 1s;">
									<div class="poster-wrapper-outer">
										<div class="poster-wrapper-inner">
											<div class="icon"></div>
											<div class="detail-wrapper">
												<p>直播将于{$lession['live_starttime']}开始，请提前进入教室！</p>
											</div>
										</div>
									</div>
								</div>  
								<button class="button button-over">我学完了</button>
							</if>
						</div>
					</div>
				</div>

				<div class="tx-sidebar-wrapper ks-sidebar" id="J_SideBar"  style="transition: 1s;">
					<div class="right_bigbox" style="">
						<div class="live_rightbox" style="">
							<ul class="tab_name clearfix">
								<li id="tab1" class="curr">讨论</li>
								<li id="tab2">目录</li>
							</ul>
							<div class="tab_con" id="tab_discuss" style="">
								<div class="tabbox" style="display: block;">
									<div class="discuss_list" style="">
										<ul id="showuserask" class="discuss_listbox">
										</ul>
									</div>
								</div>
							</div>
							<div class="tab-pannel" style="display:none">
								<div class="tx-outline ks-outline" data-guid="2" data-initialized="true" style="height: 100%;">
									<div class="outline-inner" id="J_OutlineInner">
										<div class="chapter J_Chapter">
											<h4>章节<span class="num">1</span><span class="name">{$lession['csname']}</span></h4>
											<input type="hidden" id="count" value="{$count}">
											<ul>  
												<volist name="sc_list" id="sub" key="k" >
													<if condition="$cid eq $sub['id']">
													 <a href="{:u('course/Course/study',array('id'=>$sub['id']))}" title="{$sub['sc_name']} " style='text-decoration:none;color:#333;'>
													  <li class="course J_Course head active">
													<else/>
													  <a href="{:u('course/Course/study',array('id'=>$sub['id']))}" title="{$sub['sc_name']}" style='text-decoration:none;color:#333;'>
													  <li class="course J_Course head" id="{$sub['id']}" onmousemove="addhover(this.id)" onmouseout="delhover(this.id)" >
													</if>
														<div class="info">
															<p>课时</p>
															<p class="time">{$sub['sc_time']}</p>
														</div>
														<div class="detail">
															<p>{$sub['sc_name']}</p>
															<div class="resources-wrapper">
																<span class="resources video">
																	<span class="icon"></span>点播
																</span>
															</div>
														</div>
														<if condition="(isstudy($sub['id']) eq 1) or ($cid eq $sub['id'])">
															<span class="progress done"></span>
														<else/>
															<span class="progress"></span>
														</if>
														
													</li>
													</a>
												</volist>		
											</ul> 
										</div>
										<div class="bar"></div>
									</div>
								</div>
							</div>
						</div>
						<div class="discuss" style="height:70px;width:300px;">
							<input id="sentcontet" class="discussinner" name="content" style="height:30px;width:80%;margin-top:5px;margin-left:10px;">
							<input type="hidden" name="cs_id" class='cs_id' value="{$lession['id']}"></input>
							<input type="hidden" name="uid" class='uid' value="{$uid}"></input>
					        <input type="hidden" name="channel_id" class='channel_id' value="{$channel_id}"></input>
							<button type="submit"  class="submit tjbutton">发送</button>
						</div>
					</div>
					<div class="action J_Fold unfold">
						<span class="tx-learn-iconfont unfold-icon"></span>
						<span class="tx-learn-iconfont fold-icon"></span>
					</div>
				</div>
			</div>
		</div>
	</body>
<script type="text/javascript">
    $("input").keydown(function(event) {
		 if (event.keyCode == "13") {
			 $('.submit').click();
		 }
     });
	$(document).ready(function(){
		$('.submit').click(function(){
		var name=$('.discussinner').val();
		var csid=$('.cs_id').val();
		var channelid=$('.channel_id').val();
		var uid=$('.uid').val();
		if(name.length == 0){
		   alert('请输入聊天内容');
		}else{
		  $.post("{:U('course/Course/chatsent')}",{content:name,cs_id:csid,channel_id:channelid},function(msg){
		 
			var dat=eval(msg); 
			 $("#showuserask").empty();
			 $.each(dat,function(neirongIndex,datt){
			    if(datt['uid']==uid){
				   var html = "<li class='discussme clearfix'>";
				}else{
				   var html = "<li class='discussme clearfix discussother'>";
				}
				 html +="<span class='userid'>"
				 html += datt['sender']+"</span>";
				 if(datt['pic'] ==null){
				   html +="<div class='discuss_img'><img src='__PUBLIC__/simplebootx/public/images/093958e59110293063.jpg' class='img-circle pull-left'></div>" 
				 }else{
				   html +="<div class='discuss_img'><img src="+'/data/upload/avatar/'+datt.pic+" class='img-circle pull-left'></div>" 
				 }
				 html +="<div class='sendbox clearfix'><div class='send'><div class='sendinfo'>"
				 html += datt['content']+"</div>";
				 html += " </div> </div> </li>"; 
   		     $('#showuserask').append(html);
			 $('#sentcontet').focus();		 
	 	 });
		 $(".discussinner").val('');
	   });
		}
	});});
	function fresh(){
	     var csid=$('.cs_id').val();
		 var channelid=$('.channel_id').val();
		 var uid=$('.uid').val();
		 $.get("{:U('course/Course/fresh')}",{cs_id:csid,channel_id:channelid},function(mess){
		 	var dat=eval(mess);
			 $("#showuserask").empty();
			 $.each(dat,function(neirongIndex,datt){
				if(datt['uid']==uid){
				   var html = "<li class='discussme clearfix'>";
				}else{
				   var html = "<li class='discussme clearfix discussother'>";
				}
				 html +="<span class='userid'>"
				 html += datt['sender']+"</span>";
				 if(datt['pic'] ==null){
					html +="<div class='discuss_img'><img src='__PUBLIC__/simplebootx/public/images/093958e59110293063.jpg' class='img-circle pull-left'></div>" 
				 }else{
					html +="<div class='discuss_img'><img src="+'/data/upload/avatar/'+datt.pic+" class='img-circle pull-left'></div>" 
				 }
			     html +="<div class='sendbox clearfix'><div class='send'><div class='sendinfo'>"
				 html += datt['content']+"</div>";
				 html += " </div> </div> </li>";     
				 $('#showuserask').append(html);
			});			 
			 });
	}
	setInterval("fresh()",3000);
</script>	
<script type="text/javascript">
   $('#tab1').click(function(){
	    $("#tab1").addClass('curr');
		$("#tab2").removeClass('curr');$("#id")
		$("#tab_discuss").css('display','block');
        $(".discuss").css('display','block');  
		$(".tab-pannel").css('display','none');				
	});
   $('#tab2').click(function(){
	    $("#tab2").addClass('curr');
		$("#tab1").removeClass('curr');
		$("#tab_discuss").css('display','none');
        $(".discuss").css('display','none');       
        $(".tab-pannel").css('display','block'); 
	});
</script>
<script type="text/javascript">
   $(".button-over").click(function(){ 
		var sid=document.getElementById("sc_id").value;
		var cid=document.getElementById("cs_id").value;
		var d = dialog({
			title: '正在提交...',
			content: '恭喜你，已经学完本节课程！'
			
		});
		d.width(300)
		d.showModal();
		setTimeout(function () {
			d.close().remove();
		  }, 2000);
		$.ajax({ url:'{:u('Course/Course/studied')}',
			 type:"post", data:{'sc_id':sid,'cs_id':cid}, 
			 dataType:'json', 
			 success:function(data){
			   }
			}
		  );
	}); 
</script>	
<script type="text/javascript">
    
	$(function(){
	    $('#sentcontet').focus();
	    var count=$("#count").val();
	    var width = $(window).width()+17;
        var height = $(window).height();
		$(".bar").css("height",20+count*70-35);
		$(".tx-main").css("width",width);
		$(".tx-main").css("height",height);
		$(".J_Container").css("height",height-130);
		$(".J_Container").css("width",width-320);
		$(".player").css("height",height-160);
		$(".player").css("width",width-340);
		$("#player_iframe").css("height",height-160);
		$("#player_iframe").css("width",width-340);
		$("#J_tab").css("height",height-130);
		$(".poster").css("height",height-160);
		$(".poster").css("width",width-340);
		$(".ks-player").css("width","78%");
	    $(".ks-sidebar").css("width","22%");
		$(".right_bigbox").css("height",height-50);
		$(".discuss_list").css("height",height-160);

		var onf=true;		
		$('.J_Fold').click(function(){
			if(onf){
				$(".ks-player").css("width",width);
				$(".ks-sidebar").css("width",0);
				$(".player").css("width",width-40);
	    	    $("#player_iframe").css("width",width-40);
				$(".poster").css("width",width-40);
				$(".J_Fold").removeClass("unfold");
				onf=false;
			}else{
				$(".ks-player").css("width",width-300);
				$(".player").css("width",width-340);
				$("#player_iframe").css("width",width-340);
				$(".poster").css("width",width-340);
				$(".ks-sidebar").css("width",300);
				$(".J_Fold").addClass("unfold");
			onf=true;
			}
		});
	})
	function addhover(id){
      $("#"+id).addClass('hover');
	  $("#"+id +"a").css('color','red');
	}
	function  delhover(id){
	  $("#"+id).removeClass('hover');
	} 
	
</script>
	
</html>